<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>日志查询</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="Thu, 19 Nov 1900 08:52:00 GMT">
        <link rel="shortcut icon" href="images/icons/favicon.ico" th:href="@{/images/icons/favicon.ico}">
        <link rel="apple-touch-icon" href="images/icons/favicon.png" th:href="@{/images/icons/favicon.png}">
        <link rel="apple-touch-icon" sizes="72x72" href="images/icons/favicon-72x72.png" th:href="@{/images/icons/favicon-72x72.png}">
        <link rel="apple-touch-icon" sizes="114x114" href="images/icons/favicon-114x114.png" th:href="@{/images/icons/favicon-114x114.png}">
        <!--Loading bootstrap css-->
        <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700">
        <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700,300">
        <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css" th:href="@{/vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/font-awesome/css/font-awesome.min.css" th:href="@{/vendors/font-awesome/css/font-awesome.min.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/bootstrap/css/bootstrap.min.css" th:href="@{/vendors/bootstrap/css/bootstrap.min.css}">
        <!--LOADING STYLESHEET FOR PAGE-->
        <link type="text/css" rel="stylesheet" href="../static/vendors/intro.js/introjs.css" th:href="@{/vendors/intro.js/introjs.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/calendar/zabuto_calendar.min.css" th:href="@{/vendors/calendar/zabuto_calendar.min.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/sco.message/sco.message.css" th:href="@{/vendors/sco.message/sco.message.css}">
        <!--Loading style vendors-->
        <link type="text/css" rel="stylesheet" href="../static/vendors/animate.css/animate.css" th:href="@{/vendors/animate.css/animate.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-pace/pace.css" th:href="@{/vendors/jquery-pace/pace.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/iCheck/skins/all.css" th:href="@{/vendors/iCheck/skins/all.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-notific8/jquery.notific8.min.css" th:href="@{/vendors/jquery-notific8/jquery.notific8.min.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/bootstrap-daterangepicker/daterangepicker-bs3.css" th:href="@{/vendors/bootstrap-daterangepicker/daterangepicker-bs3.css}">
        <!--Loading style-->
        <link type="text/css" rel="stylesheet" href="../static/css/themes/style1/orange-blue.css" class="default-style" th:href="@{/css/themes/style1/orange-blue.css}">
        <link type="text/css" rel="stylesheet" href="../static/css/themes/style1/orange-blue.css" id="theme-change" class="style-change color-change" th:href="@{/css/themes/style1/orange-blue.css}">
        <!--  <link type="text/css" rel="stylesheet" href="css/style-responsive.css">-->
        <!--新增加的css样式-->
        <link type="text/css" rel="stylesheet" href="../static/css/addcss.css" th:href="@{/css/addcss.css}">
        <link rel="stylesheet" href="/static/js/jeDate-gh-pages/skin/jedate.css" th:href="@{/js/jeDate-gh-pages/skin/jedate.css}">
        <script src="/static/js/jquery-2.1.1.min.js" th:src="@{/js/jquery-2.1.1.min.js}"></script>

        <script src="/static/js/jeDate-gh-pages/dist/jedate.min.js" th:src="@{/js/jeDate-gh-pages/dist/jedate.min.js}"></script>

        <style>

            .dialog{
                width:360px;border:solid 5px #666;position:absolute;display:none;z-index:101}
            .dialog .title{background-color:#33485C;padding:10px;color:#fff;font-weight:bold}
            .dialog .title img{float:right;margin-top: -8px;margin-right: -10px}
            .dialog .content{background-color:#fff;padding:25px;height:80px}
            .dialog .content img{float:left}
            .dialog .content span{float:left;padding-top:10px;padding-left:10px}
            .dialog .bottom{text-align:right;padding:10px 10px 10px 0px;background-color:#eee}
            .mask {width:100%;height:100%; background-color:rgba(0,0,0,0.4);position:absolute;
                top:0px;left:0px;display:none;z-index:100}

        </style>

    </head>
    <body class=" ">
        <div>
            <!--BEGIN BACK TO TOP-->
            <a id="totop" href="#"><i class="fa fa-angle-up"></i></a>
            <!-- 引用头部 -->
            <div th:replace="common/top::topFragment"></div>
            <!--END TOPBAR-->
            <div id="wrapper">
                <!-- 引用左菜单导航栏 -->
                <div th:replace="common/leftToolBar::leftToolbar"></div>
                <!--END CHAT FORM-->
                <!--BEGIN PAGE WRAPPER-->
                <div id="page-wrapper">
                    <!-- 引用工具条 -->
                    <div th:replace="common/toolBar::toolBar"></div>
                    <!--右侧区内容的编写 -->
                    <div class="page-content">

                        <div class="" style="margin-bottom: 15px;text-align: center">
                            <!-- 查询 --><!--action="/roomType/toRoomType?pageNum=1"-->
                            <form id="myForm" class="form-inline"  th:action="@{/logging/toLogging(pageNum=1)}" method="post">
                                <div class="form-group">
                                    <label class="control-label">日志操作员：</label>
                                    <input  class="form-control" id="operator" name="operator" th:value="${loggingQueryVo.operator}"
                                           placeholder="请输入操作员名称"/>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">开始日期：</label>
                                    <input  class="form-control" id="beginTime" name="beginTime" readonly="readonly"  th:value="${#dates.format(loggingQueryVo.beginTime,'yyyy-MM-dd HH:mm:ss')}" placeholder="YYYY-MM-DD hh:mm:ss"/>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">结束日期：</label>
                                    <input  class="form-control" id="endTime" name="endTime"  readonly="readonly"  th:value="${#dates.format(loggingQueryVo.endTime,'yyyy-MM-dd HH:mm:ss')}" placeholder="YYYY-MM-DD hh:mm:ss"/>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">日志消息：</label>
                                    <input  class="form-control" id="message" name="message" th:value="${loggingQueryVo.message}"  placeholder="请输入日志信息关键词"/>
                                </div>
                                <button type="submit" class="btn btn btn-success">查询</button>
                                <button type="button" class="btn btn btn-warning">重置</button>
                            </form>
                            <script type="text/javascript">
                                $(function () {
                                    //开始日期文本框
                                    jeDate("#beginTime",{
                                        theme:{bgcolor:"#00A680",pnColor:"#00DDAA"},
                                        festival:true,
                                        minDate:"1900-01-01",              //最小日期
                                        maxDate:"2099-12-31",              //最大日期
                                        method:{
                                            choose:function (params) {

                                            }
                                        },
                                        format: "YYYY-MM-DD hh:mm:ss"
                                    })
                                    //给日期框添加功能
                                    jeDate("#endTime",{
                                        festival:true,
                                        minDate:"1900-01-01",              //最小日期
                                        maxDate:"2099-12-31",              //最大日期
                                        method:{
                                            choose:function (params) {

                                            }
                                        },
                                        format: "YYYY-MM-DD hh:mm:ss"
                                    })
                                    /**
                                     * 重置表单信息
                                     */
                                    $(".btn-warning").click(function () {
                                        location.href="/logging/toLogging?pageNum=1";
                                    })

                                });
                            </script>
                            <!-- 表格 -->
                            <table class="table table-bordered" style="margin-top: 20px">
                                <tr id="thtr">
                                    <th>序号</th>
                                    <th>日志编号</th>
                                    <th>日志消息</th>
                                    <th>日志创建时间</th>
                                    <th>日志操作员</th>
                                    <th>操作</th>
                                </tr>
                                <tr th:each="logg,itLogg : ${pageInfo.getList()}">
                                    <td th:text="${itLogg.count}"></td>
                                    <td th:text="${logg.loggingId}"></td>
                                    <td th:text="${logg.message}"></td>
                                    <!--转换日期格式-->
                                    <td th:text="${#dates.format(logg.createDate,'yyyy-MM-dd HH:mm:ss')}"></td>
                                    <td th:text="${logg.operator}"></td>
                                    <td>
                                        <button type="button" class="btn btn-xs btn-primary active deleteBtn">删除</button>
                                    </td>
                                </tr>
                            </table>


                        <!-- 功能操作内容 -->
                    </div>
                        <div>
                            <ul class="pager">
                                <li>
                                    <a th:href="@{/logging/toLogging(pageNum=1,operator=${operator},beginTime=${beginTime},endTime=${endTime},message=${message})}" >首页</a>
                                </li>
                                <li>
                                    <a th:href="@{/logging/toLogging(pageNum=${pageInfo.isHasPreviousPage()}?${pageInfo.getPrePage()}:1,operator=${operator},beginTime=${beginTime},endTime=${endTime},message=${message})}">&laquo;</a>
                                </li>
                                <li>第 [[${pageInfo.pageNum}]] 页</li>
                                <li>
                                    <a th:href="@{/logging/toLogging(pageNum=${pageInfo.isHasNextPage()}?${pageInfo.getNextPage()}:${pageInfo.pages},operator=${operator},beginTime=${beginTime},endTime=${endTime},message=${message})}">&raquo;</a>
                                </li>
                                <li>
                                    <a th:href="@{/logging/toLogging(pageNum=${pageInfo.pages},operator=${operator},beginTime=${beginTime},endTime=${endTime},message=${message})}">尾页</a>
                                </li>
                                <li>&nbsp;&nbsp;&nbsp;总页数 [[${pageInfo.pages}]] 页</li>
                                <li>&nbsp;&nbsp;&nbsp;总记录数 [[${pageInfo.total}]] 条</li>
                            </ul>
                        </div>

                    <!--END CONTENT-->
                </div>


                    </div>
                <!--弹窗内容开始-->
                <div class="mask"></div>
                <div class="dialog">
                    <div class="title">
                        <img src="/images/room/roomTanC/close.png" alt="点击可以关闭" />删除时提示

                        <!--<img src="../../../static/images/room/roomTanC/close.png" height="32" width="34"/>-->
                    </div>
                    <div class="content">
                        <!-- <img src="images/room/roomTanC/delete.png" alt=""/>
                        您确定要删除房间号为：<font color="red" style="font-weight: bold">2001号房间</font>的该条记录吗？-->
                    </div>
                    <div class="bottom">
                        <input id="Button2" type="button" value="确定" class="btn2"/>&nbsp;&nbsp;
                        <input id="Button3" type="button" value="取消" class="btn3"/>
                    </div>
                </div> <!--弹窗内容结束-->

                <script type="text/javascript">
                    $(function() {
                        //要删除的值
                        var loggingId=null;
                        $(".deleteBtn").click(function() { //注册删除按钮点击事件
                            loggingId = $(this).parent().siblings().eq(1).html();
                            appendContent(loggingId);
                            $(".mask").show(); //显示背景色
                            showDialog(); //设置提示对话框的Top与Left
                            $(".dialog").show(); //显示提示对话框
                        })
                        //拼接content的内容
                        function appendContent(loggingId) {
                            $(".content").empty();
                            var html = "<img src='/images/room/roomTanC/delete.png' alt=\"\"/>"
                            html += "您确定要删除日志消息:"
                            html += "<font color='red' style='font-weight: bold'>";
                            html += loggingId;
                            html += "</font>的这条记录吗？"
                            $(".content").append(html);
                        }
                        /*
                        *根据当前页面与滚动条位置，设置提示对话框的Top与Left
                        */
                        function showDialog() {
                            var objW = $(window); //当前窗口
                            var objC = $(".dialog"); //对话框
                            var brsW = objW.width();
                            var brsH = objW.height();
                            var sclL = objW.scrollLeft();
                            var sclT = objW.scrollTop();
                            var curW = objC.width();
                            var curH = objC.height();
                            //计算对话框居中时的左边距
                            var left = sclL + (brsW - curW) / 2;
                            //计算对话框居中时的上边距
                            var top = sclT + (brsH - curH) / 2;
                            //设置对话框在页面中的位置
                            objC.css({ "left": left, "top": top });
                        }

                        $(window).resize(function() {//页面窗口大小改变事件
                            if (!$(".dialog").is(":visible")) {
                                return;
                            }
                            showDialog(); //设置提示对话框的Top与Left
                        });

                        $(".title img").click(function() { //关闭图片点击事件
                            $(".dialog").hide();
                            $(".mask").hide();
                        })

                        $("#Button3").click(function() {//取消按钮点击事件
                            $(".dialog").hide();
                            $(".mask").hide();
                        })

                        $("#Button2").click(function() {//确定按钮点击事件
                            $(".dialog").hide();
                            $(".mask").hide();

                            ajax_deleteLogging(loggingId);
                            // alert(dateRoom.status.statusName);//删除某行数据


                        })

                    })

                    //在这里执行删除命令
                    function ajax_deleteLogging(loggingId) {
                        var url = "/logging/deleteLoggingInfo";
                        var params = "loggingId="+loggingId;

                        $.ajax({
                            async:false,
                            url: url,
                            data:params,
                            type: "POST",
                            dataType: "json",
                            success: function(result){
                                //console.log(result.success);
                                if (result.success){
                                    alert("删除成功！");
                                    var message = $("#myForm").serialize()
                                    location.href="/logging/toLogging?pageNum=1&"+message;
                                } else {
                                    alert("删除失败！");
                                }
                            },error:function(){}
                        });

                    }
                </script>

                <!-- 引用底部 -->
                <div th:replace="common/bottom::bottom"></div>
                <!--END FOOTER-->
                <!--END PAGE WRAPPER-->

        </div>
        <script>
            $(function () {
                $("#breadAppend").append('<i class="fa fa-home"></i><a href="#">日志管理</a> <i class="fa fa-angle-right"></i> <a href="#">日志查看</a>');
                $("#logging").addClass("active");
            })
        </script>
      </div>
        <!-- 引用脚本 -->
        <div th:replace="common/script::script">

        </div>

    </body>
</html>
